<template>
  <mivaLink class="item-btns-profile clearfix" to="/account/bind">
    <div :class="['phone fr ',{verified:isBindPhone}]">
      <i class="icon" />
      <span class="tips">已绑定</span>
    </div>
    <div :class="['email fr ',{verified:isBindEmail}]">
      <i class="icon" />
      <div class="tips">已绑定</div>
    </div>
  </mivaLink>
</template>

<script>
export default {
    props: {
        userInfo: Object,
    },
    computed: {
        isBindPhone() {
            return String(this.userInfo.phone).length === 11;
        },
        isBindEmail() {
            return String(this.userInfo.email).indexOf('@') !== -1;
        },
    },
};
</script>

<style lang="less">
.item-btns-profile {
  padding: 10px 0;
  .fr {
    position: relative;
    float: right;
  }
  .tips {
    display: none;
    padding: 0 6px;
    height: 20px;
    line-height: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    position: absolute;
    right: 30px;
    top: -2px;
    white-space: nowrap;
    background-color: #fff;
    color: #222;
    z-index: 10;
    &::after {
      content: "";
      position: absolute;
      width: 8px;
      height: 8px;
      background: url();
      right: -8px;
      top: 6px;
    }
  }
  .phone {
    .icon {
      background-position: -279px -599px;
    }
    &.verified .icon {
      background-position: -343px -599px;
    }
    &.verified:hover {
      .tips {
        display: block;
      }
    }
  }
  .email {
    margin-right: 10px;
    .icon {
      background-position: -279px -534px;
    }
    &.verified .icon {
      background-position: -343px -534px;
    }
    &.verified:hover {
      .tips {
        display: block;
      }
    }
  }
}
</style>
